<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>ADD</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/assets/imgs/theme/favicon.png}">
    <!-- NewsBoard CSS  -->
    <link rel="stylesheet" th:href="@{/assets/css/style.css}">
    <link rel="stylesheet" th:href="@{/assets/css/widgets.css}">
    <link rel="stylesheet" th:href="@{/assets/css/responsive.css}">
</head>
<body>
<div class="scroll-progress primary-bg"></div>
<!-- Start Preloader -->
<div class="preloader text-center">
    <div class="circle"></div>
</div>
<!--Offcanvas sidebar-->
<aside id="sidebar-wrapper" class="custom-scrollbar offcanvas-sidebar" th:replace="commons/commons.html::sideBar">

</aside>

<!-- Start Header -->
<header class="main-header header-style-1 font-heading" th:replace="commons/commons.html::headerBar">

</header>
<!--Start search form-->
<div class="main-search-form" th:replace="commons/commons.html::searchBar">

</div>
<article class="entry-wraper mb-50">
<!--comment form-->
<div class="comment-form wow fadeIn animated">
    <div class="widget-header-2 position-relative mb-30">
        <h5 class="mt-5 mb-30">填写你的博客</h5>
    </div>
    <form class="form-contact comment_form" method="post" th:action="@{/article/addBlog}" id="commentForm" enctype="multipart/form-data">
        <div class="row">
            <div class="col-12">
                <div class="form-group">
                    <textarea class="form-control w-100" name="content" id="content" cols="30" rows="9" placeholder="Write content"></textarea>
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <input class="form-control" name="name" id="name" type="text" placeholder="Name">
                </div>
            </div>
            <div class="col-sm-6">
                <div class="form-group">
                    <input class="form-control" name="email" id="email" type="email" placeholder="Email">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group">
                    <input class="form-control" name="title" id="title" type="text" placeholder="title">
                </div>
            </div>
            <div class="col-12">
                <div class="form-group">
                    <input class="form-control" name="image" id="image" type="file" placeholder="photo">
                </div>
            </div>


        </div>
        <div class="form-group">
            <input type="submit"  class="btn button button-contactForm">Post Comment</input>
        </div>
    </form>
</div>
</article>
<footer class="pt-50 pb-20 bg-grey">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-6">
                <div class="sidebar-widget wow fadeInUp animated mb-30">
                    <div class="widget-header-2 position-relative mb-30">
                        <h5 class="mt-5 mb-30">About me</h5>
                    </div>
                    <div class="textwidget">
                        <p>
                            Start writing, no matter what. The water does not flow until the faucet is turned on.
                        </p>
                        <p><strong class="color-black">Address</strong><br>
                            123 Main Street<br>
                            New York, NY 10001</p>
                        <p><strong class="color-black">Follow me</strong><br>
                        <ul class="header-social-network d-inline-block list-inline color-white mb-20">
                            <li class="list-inline-item"><a class="fb" href="#" target="_blank" title="Facebook"><i class="elegant-icon social_facebook"></i></a></li>
                            <li class="list-inline-item"><a class="tw" href="#" target="_blank" title="Tweet now"><i class="elegant-icon social_twitter"></i></a></li>
                            <li class="list-inline-item"><a class="pt" href="#" target="_blank" title="Pin it"><i class="elegant-icon social_pinterest"></i></a></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-2 col-md-6">
                <div class="sidebar-widget widget_categories wow fadeInUp animated mb-30" data-wow-delay="0.1s">
                    <div class="widget-header-2 position-relative mb-30">
                        <h5 class="mt-5 mb-30">Quick link</h5>
                    </div>
                    <ul class="font-small">
                        <li class="cat-item cat-item-2"><a href="#">About me</a></li>
                        <li class="cat-item cat-item-4"><a href="#">Help & Support</a></li>
                        <li class="cat-item cat-item-5"><a href="#">​​Licensing Policy</a></li>
                        <li class="cat-item cat-item-6"><a href="#">Refund Policy</a></li>
                        <li class="cat-item cat-item-7"><a href="#">Hire me</a></li>
                        <li class="cat-item cat-item-7"><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-6">
                <div class="sidebar-widget widget_tagcloud wow fadeInUp animated mb-30" data-wow-delay="0.2s">
                    <div class="widget-header-2 position-relative mb-30">
                        <h5 class="mt-5 mb-30">Tagcloud</h5>
                    </div>
                    <div class="tagcloud mt-50">
                        <a class="tag-cloud-link" href="category.html">beautiful</a>
                        <a class="tag-cloud-link" href="category.html">New York</a>
                        <a class="tag-cloud-link" href="category.html">droll</a>
                        <a class="tag-cloud-link" href="category.html">intimate</a>
                        <a class="tag-cloud-link" href="category.html">loving</a>
                        <a class="tag-cloud-link" href="category.html">travel</a>
                        <a class="tag-cloud-link" href="category.html">fighting </a>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6">
                <div class="sidebar-widget widget_newsletter wow fadeInUp animated mb-30" data-wow-delay="0.3s">
                    <div class="widget-header-2 position-relative mb-30">
                        <h5 class="mt-5 mb-30">Newsletter</h5>
                    </div>
                    <div class="newsletter">
                        <p class="font-medium">Subscribe to our newsletter and get our newest updates right on your inbox.</p>
                        <form class="input-group form-subcriber mt-30 d-flex">
                            <input type="email" class="form-control bg-white font-small" placeholder="Enter your email">
                            <button class="btn bg-primary text-white" type="submit">Subscribe</button>
                            <label class="mt-20"> <input class="mr-5" name="name" type="checkbox" value="1" required=""> I agree to the <a href="#" target="_blank">terms &amp; conditions</a> </label>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer-copy-right pt-30 mt-20 wow fadeInUp animated">
            <p class="float-md-left font-small text-muted">© 2020, Stories </p>
            <p class="float-md-right font-small text-muted">
                Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a>
            </p>
        </div>
    </div>
</footer>
<!-- End Footer -->
<div class="dark-mark"></div>
<!-- Vendor JS-->

</body>
<script th:src="@{/assets/js/vendor/jquery-1.12.4.min.js}"></script>
<script type="text/javascript">

    function postMethod(){
        $.ajax({
            type:"post",
            dataType: "json",//预期服务器返回的数据类型
            url: "../article/addBlog" ,//ur
            data:{"name":$("#name").val(),"content":$('#content').val(),
            "image":$("#image")

            }

        })
    }



</script>

<script th:src="@{/assets/js/vendor/modernizr-3.5.0.min.js}"></script>

<script th:src="@{/assets/js/vendor/popper.min.js}"></script>
<script th:src="@{/assets/js/vendor/bootstrap.min.js}"></script>
<script th:src="@{/assets/js/vendor/jquery.slicknav.js}"></script>
<script th:src="@{/assets/js/vendor/slick.min.js}"></script>
<script th:src="@{/assets/js/vendor/wow.min.js}"></script>
<script th:src="@{/assets/js/vendor/jquery.ticker.js}"></script>
<script th:src="@{/assets/js/vendor/jquery.vticker-min.js}"></script>
<script th:src="@{/assets/js/vendor/jquery.scrollUp.min.js}"></script>
<script th:src="@{/assets/js/vendor/jquery.nice-select.min.js}"></script>
<script th:src="@{/assets/js/vendor/jquery.magnific-popup.js}"></script>
<script th:src="@{/assets/js/vendor/jquery.sticky.js}"></script>
<script th:src="@{/assets/js/vendor/perfect-scrollbar.js}"></script>
<script th:src="@{/assets/js/vendor/waypoints.min.js}"></script>
<script th:src="@{/assets/js/vendor/jquery.theia.sticky.js}"></script>
<!-- NewsBoard JS -->
<script th:src="@{/assets/js/main.js}"></script>

</html>